<template>
  <div class="weather-warning">
    <h2>天气预警</h2>

    <div class="cards">
      <div class="card">
        <h3>按经纬度查询</h3>
        <div class="row">
          <label>纬度：</label>
          <input class="num" v-model.number="lat" type="number" step="0.0001" placeholder="如 39.9042" />
          <label>经度：</label>
          <input class="num" v-model.number="lon" type="number" step="0.0001" placeholder="如 116.4074" />
          <button class="btn" @click="queryByLatLon" :disabled="loading">查询</button>
        </div>
      </div>
      <div class="card">
        <h3>按中文地址查询</h3>
        <div class="row">
          <input class="text" v-model="address" type="text" placeholder="如 北京市朝阳区望京SOHO" />
          <button class="btn" @click="queryByAddress" :disabled="loading">查询</button>
        </div>
        <small>提示：需要后端已配置 BAIDU_MAPS_AK 环境变量。</small>
      </div>
    </div>

    <div class="card">
      <h3>查询结果</h3>
      <pre class="result" v-if="result">{{ result }}</pre>
      <div v-else class="placeholder">暂无数据</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { WEATHER } from '@/utils/Interceptors'

const lat = ref<number | null>(39.9042)
const lon = ref<number | null>(116.4074)
const address = ref('')
const result = ref('')
const loading = ref(false)

async function queryByLatLon() {
  if (lat.value == null || lon.value == null) return
  if (lat.value < -90 || lat.value > 90 || lon.value < -180 || lon.value > 180) {
    result.value = '经纬度不合法：纬度应在[-90,90]，经度应在[-180,180]。'
    return
  }
  loading.value = true
  result.value = ''
  try {
    const resp = await WEATHER.get(`/api/weather/forecast`, { params: { lat: lat.value, lon: lon.value } })
    result.value = String(resp.data ?? '')
  } catch (err: any) {
    result.value = `调用失败：${err?.message || err}`
  } finally {
    loading.value = false
  }
}

async function queryByAddress() {
  if (!address.value) return
  loading.value = true
  result.value = ''
  try {
    const resp = await WEATHER.get(`/api/weather/forecast-by-address`, { params: { address: address.value } })
    result.value = String(resp.data ?? '')
  } catch (err: any) {
    result.value = `调用失败：${err?.message || err}`
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.weather-warning { padding: 16px; }
.cards { display:grid; grid-template-columns: 1fr; gap:12px; margin-bottom:12px; }
@media (min-width: 980px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background:#fff; border:1px solid #e8e8e8; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card h3 { margin: 0 0 10px; font-size: 16px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row label { color:#666; }
.row input { padding: 6px 8px; border: 1px solid #ddd; border-radius: 6px; outline: none; }
.row input.num { width: 160px; }
.row input.text { flex: 1 1 280px; min-width: 220px; }
.btn { padding: 6px 12px; border: 1px solid #d0d0d0; background: #f9fafb; border-radius: 6px; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.result { white-space: pre-wrap; background: #0b1024; color: #d4f2ff; padding: 10px; border-radius: 6px; min-height: 120px; }
.placeholder { color: #888; }
</style>